<template>
	<u-grid :col="modelData.num" :border="false" class="navagation-view">
		<u-grid-item v-for="(item, index) in modelData.navList" :key="index" @click="goPage(item.url, item.switchTab)">
			<u-image :width="size" :height="size" :src="item.image.url"></u-image>
			<view class="grid-text" :style="{ color: modelData.color }">{{ item.text }}</view>
		</u-grid-item>
	</u-grid>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			size: '100rpx'
		};
	}
};
</script>

<style scoped lang="scss">
.grid-text {
	font-size: 26rpx;
	margin-top: 4rpx;
	color: #666666;
	margin-top: 6rpx;
}
.navagation-view {
	background-color: #ffffff;
}
</style>
